<template>
  <el-container v-loading="loading">
    <div class="container" style="height: 100vh;">
      <div id="app">
        <!-- 手机模拟器 -->
        <div class="app-preview">
          <div class="app-head"></div>
          <div class="app-content">
            <div class="app-content-title" style="background:#FFF;border-bottom: 1px solid #ddd;">
              小程序用户中心设置
            </div>

            <div class="app-content-main active">
              <div class="main-head" :style="{backgroundImage:'url('+ pageConfig.user_center_bg + ')'}"
                   :class="pageConfig.top_style == 1 ? 'main-head-face-style2' : ''">
                <div class="main-head-face"></div>
              </div>
              <div :class="pageConfig.menu_style == 1 ? 'main-nav-group2' : 'main-nav-group'">
                <div class="main-nav-item" v-for="navItem in pageConfig.menus">
                  <img :src="navItem.icon" class="main-nav-icon" alt="">
                  <p class="main-nav-title">{{navItem.name}}</p>
                </div>
              </div>
            </div>
          </div>
          <div class="app-footer"></div>
        </div>

        <!-- 编辑器 -->
        <div class="app-editor" v-bind:style="appEditorConfig.fixedPosition">

          <el-form label-width="100px" label-position="right" size="small">
            <el-form-item label="头部背景图片">
              <el-input placeholder="请输入内容" v-model="pageConfig.user_center_bg" class="input-with-select">
                <img slot="prepend" height="30px" width="30px"
                     :src="pageConfig.user_center_bg" alt="">
                <el-button slot="append" icon="fa fa-fw fa-cloud"
                           data-toggle="modal"
                           data-target="#exampleModalCenter"
                           @click="openPhotoLibrary({dataLinked: 'pageConfig.user_center_bg'})"></el-button>
              </el-input>
            </el-form-item>

            <el-form-item label="头部样式">
              <el-radio v-model="pageConfig.top_style" label="0" border>样式一</el-radio>
              <el-radio v-model="pageConfig.top_style" label="1" border>样式二</el-radio>
            </el-form-item>

            <el-form-item label="菜单栏样式">
              <el-radio v-model="pageConfig.menu_style" label="0" border>列表形式</el-radio>
              <el-radio v-model="pageConfig.menu_style" label="1" border>九宫格形式</el-radio>
            </el-form-item>

            <div class="editor-nav-group" v-for="(navItem,index) in pageConfig.menus">
              <el-form-item label="名称">
                <el-input placeholder="请输入内容" v-model="navItem.name" class="input-with-select" clearable>
                </el-input>
              </el-form-item>
              <el-form-item label="图标">
                <el-input placeholder="请输入内容" v-model="navItem.icon" class="input-with-select" readonly>
                  <img slot="prepend" height="30px" width="30px"
                       :src="navItem.icon" alt="">
                  <el-button slot="append" icon="fa fa-fw fa-cloud"
                             data-toggle="modal"
                             data-target="#exampleModalCenter"
                             @click="openPhotoLibrary({dataLinked: 'pageConfig.menus['+index+'].icon'})"></el-button>
                </el-input>
              </el-form-item>
              <!--<el-form-item label="头部样式">
                <el-radio v-model="navItem.open_type" label="navigator" border>页面跳转</el-radio>
                <el-radio v-model="navItem.open_type" label="tel" border>客服电话</el-radio>
              </el-form-item>-->
              <el-form-item label="跳转链接">
                <el-select v-model="navItem.id" class="display" placeholder="请选择"
                           @change="openTypeChange({current: navItem})">
                  <el-option
                    v-for="item in linkedArr"
                    :label="item.name"
                    :value="item.id">
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="电话" v-if="navItem.open_type == 'tel'">
                <el-input placeholder="请输入内容" v-model="navItem.url" class="input-with-select" clearable></el-input>
              </el-form-item>
              <el-button type="info" size="mini" round icon="fa fa-fw fa-close" class="position-btn"
                         @click="removeNavItem({index: index})"></el-button>
            </div>
            <el-button type="primary" size="small" class="display" @click="appendNavItem()">添加导航</el-button>
          </el-form>
          <el-button type="success" size="small" class="display m-top submit-btn" @click="submitData()">立即保存</el-button>
        </div>
      </div>

      <!-- 图片库 -->
      <div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog"
           aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered photo-library" role="document">
          <div class="modal-content">
            <div class="modal-header">
              <h5 class="modal-title" id="exampleModalLongTitle">{{photoLibrary.title}}</h5>
              <input type="hidden">
              <button type="button" class="btn btn-primary btn-sm image-upload-btn" data-toggle="modal"
                      data-target="#exampleModal"><i class="fa fa-cloud-upload"></i> 图片上传
              </button>
              <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
              </button>
            </div>
            <div class="modal-body">
              <div class="image-groups">
                <div class="image-item" v-for="photoItem in photoLibrary.photos">
                  <i class="fa-li fa fa-remove remove-icon image-item-icon"
                     @click="delPhoto({linked: photoItem})"></i>
                  <img v-bind:src="photoItem" title="图片" data-dismiss="modal" ref="choosePhoto"
                       @click="choosePhoto({linked: photoItem})">
                </div>
              </div>
            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-secondary btn-sm" data-dismiss="modal">
                {{photoLibrary.returnBtnText}}
              </button>
              <!--<button type="button" class="btn btn-primary">Save changes</button>-->
            </div>
          </div>
        </div>
      </div>


      <!-- Modal -->
      <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
           aria-hidden="true">
        <div class="modal-dialog" role="document">
          <div class="modal-content">
            <div class="modal-header">
              <h5 class="modal-title" id="exampleModalLabel">图片上传</h5>
              <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
              </button>
            </div>
            <div class="modal-body file-upload-module">

              <div style="margin-bottom: 20px">
                <h4>选择图片</h4>
                <a id='addPic' class="btn btn-info btn-sm" href="" @click="addPic">添加图片 </a>
                <input type="file" id="uploadFile" @change="onFileChange" multiple style="display: none;">
              </div>
              <div v-if="images.length >0">
                <ul>
                  <li v-for="(image,key) in images">
                    <img :src="image" @click='delImage(key)'/>
                    <a href="#" style="position: absolute;" @click='delImage(key)'>
                      <span class="glyphicon glyphicon-remove"></span>
                    </a>
                  </li>
                </ul>

              </div>
            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-secondary btn-sm" data-dismiss="modal">关闭</button>
              <button type="button" class="btn btn-danger btn-sm" @click="removeImage">移除全部图片</button>
              <button type="button" class="btn btn-primary btn-sm" data-dismiss="modal" @click='uploadImage'>上传
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>


  </el-container>
</template>
<script>
  export default {
    data() {
      return {
        loading: true,  // 页面加载
        name: "menu_template",                //类型：String  必有字段  备注：模板名称
        pageConfig: {    // 页面配置数据格式
          "user_center_bg": "http://www.weiqing.com/addons/sd_liferuning/core/public/WeChat/bg3.png",                //类型：String  必有字段  备注：背景图片
          "menu_style": "0",                //类型：String  必有字段  备注：列表样式
          "top_style": "0",                //类型：String  必有字段  备注：头部样式
          "menus": [               //类型：Array  必有字段  备注：无
            {                //类型：Object  必有字段  备注：无
              "icon": "http://www.weiqing.com/addons/sd_liferuning/core/public/WeChat/default/home/user/icon1.png",                //类型：String  必有字段  备注：无
              "name": "钱包",                //类型：String  必有字段  备注：无
              "open_type": "navigator",                //类型：String  必有字段  备注：打开方式
              "url": "/sd_liferuning/pages/constmer/balance-management/index",                //类型：String  必有字段  备注：无
              "type": "", // 选择类型
              "id":""                //类型：String  必有字段  备注：无
            }, {                //类型：Object  必有字段  备注：无
              "icon": "http://www.weiqing.com/addons/sd_liferuning/core/public/WeChat/default/home/user/icon2.png",                //类型：String  必有字段  备注：无
              "name": "优惠券",                //类型：String  必有字段  备注：无
              "open_type": "navigator",                //类型：String  必有字段  备注：无
              "url": "/sd_liferuning/pages/constmer/coupon-management/index",                //类型：String  必有字段  备注：无
              "type": "", // 选择类型
              "id":""                //类型：String  必有字段  备注：无
            }, {                //类型：Object  必有字段  备注：无
              "icon": "http://www.weiqing.com/addons/sd_liferuning/core/public/WeChat/default/home/user/icon9.png",                //类型：String  必有字段  备注：无
              "name": "我的订单",                //类型：String  必有字段  备注：无
              "open_type": "navigator",                //类型：String  必有字段  备注：无
              "url": "/sd_liferuning/pages/constmer/other-order-list/index",                //类型：String  必有字段  备注：无
              "type": "", // 选择类型
              "id":""                //类型：String  必有字段  备注：无
            }, {                //类型：Object  必有字段  备注：无
              "icon": "http://www.weiqing.com/addons/sd_liferuning/core/public/WeChat/default/home/user/icon3.png",                //类型：String  必有字段  备注：无
              "name": "我的地址",                //类型：String  必有字段  备注：无
              "open_type": "navigator",                //类型：String  必有字段  备注：无
              "url": "/sd_liferuning/pages/constmer/address-list/index",                //类型：String  必有字段  备注：无
              "type": "", // 选择类型
              "id":""                //类型：String  必有字段  备注：无
            },
            {                //类型：Object  必有字段  备注：无
              "icon": "http://www.weiqing.com/addons/sd_liferuning/core/public/WeChat/default/home/user/icon11.png",                //类型：String  必有字段  备注：无
              "name": "会员中心",                //类型：String  必有字段  备注：无
              "open_type": "navigator",                //类型：String  必有字段  备注：无
              "url": "/sd_liferuning/pages/constmer/member-center/index",                //类型：String  必有字段  备注：无
              "type": "", // 选择类型
              "id":""                //类型：String  必有字段  备注：无
            }, {                //类型：Object  必有字段  备注：无
              "icon": "http://www.weiqing.com/addons/sd_liferuning/core/public/WeChat/default/home/user/icon10.png",                //类型：String  必有字段  备注：无
              "name": "消息管理",                //类型：String  必有字段  备注：无
              "open_type": "navigator",                //类型：String  必有字段  备注：无
              "url": "/sd_liferuning/pages/constmer/message-management/index",                //类型：String  必有字段  备注：无
              "type": "", // 选择类型
            }, {                //类型：Object  必有字段  备注：无
              "icon": "http://www.weiqing.com/addons/sd_liferuning/core/public/WeChat/default/home/user/icon6.png",                //类型：String  必有字段  备注：无
              "name": "加入跑腿",                //类型：String  必有字段  备注：无
              "open_type": "navigator",                //类型：String  必有字段  备注：无
              "url": "/service/pages/service/index/index",                //类型：String  必有字段  备注：无
              "type": "", // 选择类型
              "id":""                //类型：String  必有字段  备注：无
            },
            {                //类型：Object  必有字段  备注：无
              "icon": "http://www.weiqing.com/addons/sd_liferuning/core/public/WeChat/default/home/user/icon7.png",                //类型：String  必有字段  备注：无
              "name": "意见反馈",                //类型：String  必有字段  备注：无
              "open_type": "navigator",                //类型：String  必有字段  备注：无
              "url": "/sd_liferuning/pages/constmer/advise/index",                //类型：String  必有字段  备注：无
              "type": "", // 选择类型
              "id":""                //类型：String  必有字段  备注：无
            },
            {                //类型：Object  必有字段  备注：无
              "icon": "http://www.weiqing.com/addons/sd_liferuning/core/public/WeChat/default/home/user/icon8.png",                //类型：String  必有字段  备注：无
              "name": "领券中心",                //类型：String  必有字段  备注：无
              "open_type": "navigator",                //类型：String  必有字段  备注：无
              "url": "/sd_liferuning/pages/constmer/lingjuan/index",                //类型：String  必有字段  备注：无
              "type": "", // 选择类型
              "id":""                //类型：String  必有字段  备注：无
            },
            {                //类型：Object  必有字段  备注：无
              "icon": "http://www.weiqing.com/addons/sd_liferuning/core/public/WeChat/default/home/user/icon9.png",                //类型：String  必有字段  备注：无
              "open_type": "tel",                //类型：String  必有字段  备注：无
              "name": "联系客服",                //类型：String  必有字段  备注：无
              "url": "mock",                //类型：String  必有字段  备注：无
              "type": "", // 选择类型
              "id":""                //类型：String  必有字段  备注：无
            }
          ]
        },
        appEditorConfig: {
          currentEditor: 'main',
          fixedPosition: {
            'top': '0px'
          }
        },
        photoLibrary: {
          title: '图片库',
          returnBtnText: '返回',
          dataUrl: '',
          photos: [
            // {
            //     title: '广播',
            //     photoUrl: 'images/notify.png'
            // },
            // {
            //     title: '轮播',
            //     photoUrl: 'images/banner.png'
            // }
          ]
        },
        linkedArr: [],  // 链接数组
        images: []  // 图片上传
      }
    },
    mounted: function () {
      let _this = this;

      // 默认数据加载
      this.api.getUserCenterTemplate().then(function (res) {
        if (res.code == 1) {
          _this.name = res.data.name;
          _this.pageConfig = res.data.value;
        }
        _this.loading = false;
      }).catch(function (res) {
        throw new Error(res);
      });

      // 链接加载
      this.api.getUserCenterLinkedUrl().then(function (res) {
        if (res.code == 1) {
          _this.linkedArr = res.data;
        }
      }).catch(function (res) {
        throw new Error(res);
      });

      // 图片加载
      _this.loadImageLibary();
    },
    methods: {
      /**
       * 加载图片库
       * */
      loadImageLibary: function () {
        let _this = this;
        this.api.getImageLibary().then(function (res) {
          if (res.code == 1) {
            // res.data 回传回来的JSON数组
            let arr = []; // 定义数组对象
            arr = res.data; // 自动将JSON数组转换为数组并且可以操作相关的API类库
            _this.photoLibrary.photos = arr;
          }
        }).catch(function (res) {
          throw new Error(res);
        });
      },
      defaultColorReset: function ({dataLinked: dataLinked, color: color}) {   // 默认颜色重置
        let defaultColor = color;
        eval('this.' + dataLinked + '="' + defaultColor + '"');
      },
      chooseAppView: function ({viewName}) {  // 切换编辑器显示状态
        const HEAD = 'head';
        const MAIN = 'main';
        const NAV = 'nav';
        if (viewName == HEAD) {
          this.appEditorConfig.currentEditor = HEAD;
          this.appEditorConfig.fixedPosition = {
            'top': '0px'
          }
        }

        if (viewName == MAIN) {
          this.appEditorConfig.currentEditor = MAIN;
          this.appEditorConfig.fixedPosition = {
            'top': '100px'
          }
        }

        if (viewName == NAV) {
          this.appEditorConfig.currentEditor = NAV;
          this.appEditorConfig.fixedPosition = {
            'top': '500px'
          }
        }

      },
      appendNavItem: function () { // 添加导航
        let navItem = {};
        this.$set(navItem, 'icon', '');
        this.$set(navItem, 'name', '');
        this.$set(navItem, 'open_type', '');
        this.$set(navItem, 'url', '');
        this.pageConfig.menus.push(navItem);
      },
      removeNavItem: function ({index: index}) { // 删除导航
        if (this.pageConfig.menus.length <= 1) {
          this.$message({
            showClose: true,
            message: '删除最少保留一个',
            type: 'warning'
          });
          return false;
        }
        this.removeItemByIndex({index: index, data: this.pageConfig.menus});
      },
      /**
       * 跳转类型更改
       */
      openTypeChange: function ({current: current}) {
        this.linkedArr.forEach(function (item, index) {
          if (item.id == current.id) {
            current.open_type = item.open_type;
            current.url = item.url;
          }
        });
      },
      removeItemByIndex: function ({index: index, data: data}) {  // 根据下标删除
        for (let i = index; i < data.length; i++) {
          if (i >= data.length - 1) {
            data.pop();
          } else {
            data[i] = data[i + 1];
          }
        }
      },
      choosePhoto: function ({linked: linked}) {  // 图片选择
        eval(this.photoLibrary.dataUrl + "='" + linked + "'");
      },
      delPhoto: function ({linked: linked}) { // 图片删除
        let _this = this;
        _this.api.delImageFromImageLibary({
          src: linked
        }).then(function (res) {
          if (res.code == 1) {
            _this.loadImageLibary();
            _this.$message({
              showClose: true,
              message: res.msg,
              type: 'success',
            });
          } else {
            _this.$message({
              showClose: true,
              message: res.msg,
              type: 'warning'
            });
          }
        }).catch(function (error) {
          throw new Error(error);
        });
      },
      openPhotoLibrary: function ({dataLinked: dataLinked}) {
        this.photoLibrary.dataUrl = 'this.' + dataLinked;
      },
      addPic(e) {
        e.preventDefault();
        this.$('#uploadFile').trigger('click');
        return false;
      },
      onFileChange(e) {
        let files = e.target.files;
        if (!files.length) return;
        this.createImage(files);
      },
      createImage(file) {
        if (typeof FileReader === 'undefined') {
          alert('您的浏览器不支持图片上传，请升级您的浏览器');
          return false;
        }
        let image = new Image();
        let vm = this;
        let leng = file.length;
        for (let i = 0; i < leng; i++) {
          let reader = new FileReader();
          reader.readAsDataURL(file[i]);
          reader.onload = function (e) {
            vm.images.push(e.target.result);
          };
        }
      },
      delImage: function (index) {
        this.images.shift(index);
      },
      removeImage: function (e) {
        this.images = [];
      },
      uploadImage: function () {
        let _this = this;
        this.api.uploadImageAlwaysImageLibary({
          images: _this.images
        }, "index").then(function (res) {
          if (res.code == 1) {
            let tempPhotos = _this.photoLibrary.photos.reverse();
            res.data.forEach(function (item, index) {
              tempPhotos.push(item);
            });
            tempPhotos.reverse();
            _this.removeImage();

            _this.$message({
              showClose: true,
              message: res.msg,
              type: 'success',
            });
          } else {
            _this.$message({
              showClose: true,
              message: res.msg,
              type: 'warning'
            });
          }
        }).catch(function (res) {
          throw new Error(res);
        });
      },
      submitData: function () {
        let _this = this;
        _this.api.updateTemplate({
          name: _this.name,
          value: _this.pageConfig
        }).then(function (res) {
          if (res.code == 1) {
            _this.$message({
              showClose: true,
              message: res.msg,
              type: 'success',
            });
          } else {
            _this.$message({
              showClose: true,
              message: res.msg,
              type: 'warning'
            });
          }
        }).catch(function (error) {
          throw new Error(error);
        });
      }
    }
  }
</script>

<style scoped>
  .el-container {
    display: block;
  }

  .container {
    width: 100%;
    margin: 0 15px;
  }

  .none {
    display: none;
  }

  a, input {
    outline: none;
  }

  .m-top {
    margin-top: 15px !important;
  }

  .display {
    width: 100%;
  }

  ::-webkit-scrollbar {
    width: 0px; /*滚动条宽度*/
    height: 0px; /*滚动条高度*/
  }

  /* 系统弹窗 */
  .windowAlert {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    text-align: center;
    z-index: 99999;
    transition: all .5s ease 0s;
  }

  /* 图片库 */
  .photo-library {
    max-width: 1000px !important;
    max-height: 700px !important;
  }

  .photo-library .modal-body {
    max-height: 550px;
    height: 550px;
    overflow-y: auto;
  }

  .photo-library .image-groups {
    width: 100%;
  }

  .photo-library .image-item {
    display: block;
    width: 160px;
    height: 110px;
    background: #FFFFFF;
    border: 3px solid #f2f2f2;
    border-radius: 5px;
    float: left;
    margin: 10px;
  }

  .photo-library .image-item img {
    display: block;
    width: 100%;
    height: 100%;
  }

  .image-upload-btn {
    margin-left: 780px;
  }

  /* 图片上传 */
  .file-upload-module {
    max-height: 550px;
    height: 550px;
    overflow: auto;
  }

  .file-upload-module ul {
    list-style-type: none;
  }

  .file-upload-module img {
    width: 150px;
    height: 150px;
    display: block;
    margin: 15px auto;
  }

  /* 图片删除 */
  .image-item {
    position: relative;
  }

  .photoItem {
    position: absolute;
    z-index: 99;
  }

  .image-item-icon {
    position: absolute;
    z-index: 999;
    left: 115px;
    top: 5px;
    /*display: block;*/
    background: red;
    border-radius: 999px;
    color: #ffffff;
  }

  /* 手机模型 */
  .app-preview {
    background: #FFF;
    width: 375px;
    height: 667px;
    border: 1px solid #ddd;
    border-radius: 10px;
    margin: 20px 0;
    padding: 15px;
    float: left;
    position: fixed;
    top: 100px;
  }

  /* 顶部 */
  .app-head {
    height: 44px;
    line-height: 44px;
    text-align: center;
    position: relative;
  }

  .app-head:before {
    content: "";
    position: absolute;
    top: 18px;
    left: 140px;
    height: 8px;
    width: 8px;
    background: #ddd;
    border-radius: 8px;
  }

  .app-head:after {
    content: "";
    position: absolute;
    top: 18px;
    left: 160px;
    height: 8px;
    width: 50px;
    background: #ddd;
    border-radius: 8px;
  }

  /* 内容 */
  .app-content {
    width: 100%;
    height: 550px;
    background: #FFF;
    border: 1px solid #ddd;
    border-radius: 5px;
    overflow: hidden;
  }

  .app-content > .active {
    border: 2px dashed green;
  }

  /*  内容顶部 */
  .app-content .app-content-title {
    height: 50px;
    line-height: 50px;
    font-size: 14px;
    text-align: center;
  }

  /* 内容主要区域 */
  .app-content-main {
    height: 498px;
    overflow-y: auto;
  }

  /*----------------- 导航 ------------------ */
  .app-content-nav {
    height: 58px;
    line-height: 58px;
    display: flex;
    border-top: 1px solid #eee;
  }

  .app-content-nav-item {
    flex: 1;
  }

  .app-content-nav-item-icon {
    width: 30px;
    height: 30px;
    display: block;
    margin: 3px auto;
    border-radius: 100px;
  }

  .app-content-nav-item-text {
    font-size: 10px;
    height: 20px;
    line-height: 20px;
    text-align: center;
  }

  /*----------------- 导航 ------------------ */

  /* 底部 */
  .app-footer {
    height: 44px;
    line-height: 44px;
    text-align: center;
    position: relative;
  }

  .app-footer:before {
    content: "";
    position: absolute;
    top: 12px;
    left: 150px;
    height: 30px;
    width: 60px;
    border: 1px solid #ddd;
    border-radius: 8px;
  }

  /* -------------------- 编辑工具 --------------------------- */
  .app-editor {
    border: 1px solid #ddd;
    width: 650px;
    min-height: 100px;
    float: left;
    margin: 50px 0 50px 400px;
    position: relative;
    border-radius: 10px;
    padding: 15px 15px 30px;
    transition: all .5s ease 0s;
  }

  .app-editor:before {
    position: absolute;
    content: "◆";
    top: 30px;
    left: -11px;
    display: block;
    width: 9px;
    height: 18px;
    font-size: 24px;
    color: rgb(255, 255, 255);
    z-index: 111;
  }

  .app-editor:after {
    position: absolute;
    content: "◆";
    top: 30px;
    left: -12px;
    color: rgb(221, 221, 221);
    z-index: 11;
    display: block;
    width: 9px;
    height: 18px;
    font-size: 24px;
  }

  /* 页面 */
  .editor-nav-group {
    background: #F8F9FA;
    padding: 25px 15px 0;
    border-bottom: 1px solid #ddd;
    position: relative;
  }

  .position-btn {
    position: absolute;
    right: 5px;
    top: 3px;
    padding: 2px 1px;
  }

  .submit-btn{
    position: fixed;
    top: 165px;
    left: 1300px;
    height: 150px;
    font-size: 24px;
    width: 24px;
    white-space: pre-wrap;
    margin: 0;
    padding: 0 40px 0 20px;
    text-align: center;
  }

  /* -------------------- 编辑工具 --------------------------- */

  /* -------------------- 视图模型样式 -------------------- */
  .main-head {
    height: 120px;
    overflow: hidden;
  }

  .main-head-face {
    width: 50px;
    height: 50px;
    border-radius: 50px;
    background: #ddd;
    margin: 25px auto;
  }

  .main-head-face-style2 .main-head-face {
    float: left;
    margin-left: 15px;
  }

  .main-nav-group {
    margin-bottom: 15px;
  }

  .main-nav-group .main-nav-item {
    width: 100%;
    border-bottom: 1px solid #ddd;
    height: 40px;
    line-height: 40px;
    padding: 0 15px;
    overflow: hidden;
  }

  .main-nav-group .main-nav-icon {
    width: 20px;
    height: 20px;
    float: left;
    margin: 10px 0;
  }

  .main-nav-group .main-nav-title {
    font-size: 12px;
    margin-left: 15px;
    float: left;
  }

  .main-nav-group2 {
    margin-bottom: 15px;
    overflow: hidden;
  }

  .main-nav-group2 .main-nav-item {
    width: 33%;
    float: left;
    margin: 15px 0 0;
  }

  .main-nav-group2 .main-nav-icon {
    width: 20px;
    height: 20px;
    margin: 6px auto;
    display: block;
  }

  .main-nav-group2 .main-nav-title {
    font-size: 12px;
    text-align: center;
  }
  /* -------------------- 视图模型样式 -------------------- */

</style>
